<!--会议室预约-->
<template>
  <view class="subscribe">
    <PageWarpper>
      <template v-slot:main>
        <view class="video-container">
          <video
            id="myVideo"
            :poster="videoCover"
            :src="pageData.videoUrl"
            :title="pageData.annTitle"
            binderror="videoErrorCallback"
            danmu-list="{{danmuList}}"
            enable-danmu
            danmu-btn
            show-center-play-btn="{{false}}"
            show-play-btn="{{true}}"
            controls
            picture-in-picture-mode="{{['push', 'pop']}}"
          ></video>
        </view>

        <view class="menus border-top border-bottom">
          <view class="menus_cell border-right d-flex" @click="openPage('/subscribe/pay')">
            <text class="siyuan-medium">自习室</text>
            <text class="intel-one-mono-medium">Study Room</text>
          </view>
          <view class="menus_cell d-flex" @click="openPage('/subscribe/meetingroom')">
            <text class="siyuan-medium">会议室</text>
            <text class="intel-one-mono-medium">Meeting Room</text>
          </view>
        </view>

        <view class="notice">
          <view class="title siyuan-medium">{{ pageData.annTitle }}</view>
          <view class="desc" v-html="repairRichText(pageData.annContent)"></view>
        </view>
      </template>
    </PageWarpper>
  </view>
</template>

<script setup>
import { onMounted, ref } from "vue";
import PageWarpper from "@/components/Layer/PageWarpper.vue";
import { getShareSpaceDeatil } from "@/server/api.js";
import { repairRichText } from "@/util/index.js";
const openPage = path => {
  uni.navigateTo({
    url: path,
  });
};
let pageData = ref({});

onMounted(() => {
  getShareSpaceDeatil().then(res => {
    console.log(res.data);
    pageData.value = res.data;
  });
});
</script>

<style lang="scss" scoped>
.video-container {
  width: 100%;
  margin-bottom: 68rpx;
  video {
    width: 100%;
  }
}
.menus {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: 204rpx;
  background-color: #ffffff;

  &_cell {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    text.siyuan-medium {
      font-size: 26rpx;
    }
    text.intel-one-mono-medium {
      margin-top: 12rpx;
      font-size: 24rpx;
    }
  }
}

.notice {
  margin: 68rpx 0 40rpx;
  padding: 24rpx;
  background-color: #f2f2f2;
  font-size: 24rpx;
  line-height: 30rpx;
  .title {
    font-size: 28rpx;
    margin-bottom: 32rpx;
  }
}
</style>
